<template>
  <div class="index">
    <div class="wihtee">
      <!-- 导航 -->
      <div>
        <van-nav-bar :title="bookDatas.book_name" left-arrow @click-left="onClickLeft" fixed placeholder border />
      </div>
      <!-- 书籍详情 -->
      <div class="book1">
        <div class="book2">
          <img :src="bookDatas.book_cover" style="width: 80px" />
        </div>
        <div class="book3">
          <span class="book_text"> {{ bookDatas.book_name }}</span>
          <span class="book_text"> {{ bookDatas.writer }}</span>
          <span class="book_text"> <van-rate v-model="value" readonly />{{ bookDatas.book_sorce }}</span>
          <span class="book_text"> {{ bookDatas.category_name }}</span>
        </div>
      </div>
      <!-- 书架和阅读 -->
      <div class="butt">
        <van-button type="default" @click="readbook(bookDatas.chapter_num, bookDatas.id)">免费试读</van-button>
        <van-button type="default" @click="add_bookshelf(bookDatas.id)">加入书架</van-button>
      </div>
      <div class="wihtet">
        <!-- 图书简介 -->
        <van-divider :style="{ borderColor: '#1989fa', padding: '0 16px' }" />
        <p style="width: 90%; margin-left: 5%">{{ bookDatas.introduction }}</p>
        <van-divider :style="{ borderColor: '#1989fa', padding: '0 16px' }" />
      </div>
      <!-- 目录 -->
      <div>
        <van-cell-group @click="catalogs(bookDatas.chapter_num)">
          <van-cell title="目录" :value="'第' + bookDatas.chapter_num + '章节'" is-link />
        </van-cell-group>
      </div>
    </div>

    <!-- 推荐 -->
    <div class="wihtet">
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"> 热门推荐 </van-divider>
      <van-grid :border="false" :column-num="4">
        <van-grid-item v-for="(book, index) in bookDates" :key="index" @click="bookDetail(book.id)">
          <van-image :src="book.book_cover" />
          <span>{{ book.book_name }} </span>
        </van-grid-item>
      </van-grid>
    </div>
    <!-- 评论信息 -->
    <div class="remen">
      <h4 style="padding-top: 10px; margin-left: 10px">热门评论</h4>
      <van-divider :style="{ borderColor: '#1989fa' }" />
      <div class="plun">
        <div v-for="condate in commentDates" :key="condate.id">
          <div class="plun1">
            <p style="font-size: 16px">{{ condate.username }}</p>
            <p style="font-size: 10px">{{ condate.add_time }}</p>
          </div>
          <p>{{ condate.content }}</p>
          <van-divider :style="{ borderColor: 'gainsboro' }" />
        </div>
      </div>
    </div>
    <!-- 评论 -->
    <div class="buttomfb">
      <input type="text" name="" id="" v-model="cont" style="width: 250px" />

      <span @click="fbls" style="color: rgb(255, 255, 255)">发送</span>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { Rate } from 'vant'
import { Divider } from 'vant'
import { Button } from 'vant'
import { Grid, GridItem } from 'vant'
import { NavBar, Toast } from 'vant'
import { Cell, CellGroup } from 'vant'
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'

export default {
  name: 'bookDetail',
  data() {
    return {
      bookDatas: [],
      bookDates: [],
      commentDates: [],
      cont: '',
      value: 3
    }
  },
  methods: {
    // 目录
    catalogs(index) {
      if (index == 0) {
        Toast('该书暂无内容')
      } else {
        // this.$router.push('/catalog')
        this.$router.push({
          path: `/catalog/${this.$route.params.id}`
        })
      }

      // console.log(index)
    },
    onClickLeft() {
      this.$router.push('/book')
    },
    // 点击详情推荐
    bookDetail(index) {
      this.$router.push({
        path: `/bookDetail/${index}`
      })
      location.reload()
    },
    // 阅读
    readbook(index, id) {
      if (this.bookDatas.chapter_num == 0) {
        Toast('该书暂无内容')
        return false
      }
      // 获取值判断是否在书架上
      axios({
        method: 'post',
        url: this.baseURL + '/api/api/show_book',
        data: {
          username: localStorage.getItem('id_card'),
          book_id: this.$route.params.id
        }
      }).then((res) => {
        // console.log(res)
        var chapterID = res.data.read_history
        if (chapterID == -1) {
          chapterID = 1
        }
        this.$router.push({
          path: `/read_book/${id}/${chapterID}`
        })
      })
    },
    // 加入书架
    add_bookshelf(index) {
      // console.log(index)
      axios({
        method: 'post',
        url: this.baseURL + '/api/api/add_bookshelf',
        data: {
          id: index,
          username: localStorage.getItem('id_card')
        }
      }).then((res) => {
        // console.log(res)
        if (res.data.code == 0) {
          Toast(res.data.msg)
        }
        if (res.data.code == 1) {
          Toast(res.data.msg)
        }
      })
    },
    // 发表评论
    fbls() {
      // 发送信息
      axios({
        method: 'post',
        url: this.baseURL + '/api/api/book_comment',
        data: {
          id_card: localStorage.getItem('id_card'),
          book_id: this.bookDatas.id,
          sms: this.cont
        }
      }).then((result) => {
        // console.log(result)
        if (result.data.code == 1) {
          Toast(result.data.msg)
        }
        if (result.data.code == 0) {
          Toast(result.data.msg)
        }
        this.cont = ''
      })
      // 重新获取信息列表
      location.reload()
    }
  },

  mounted() {
    // 书籍详情
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/book_detail/:id',
      data: {
        id: this.$route.params.id
      }
    }).then((res) => {
      this.bookDatas = res.data
      // console.log(this.bookDatas)
      if (this.bookDatas.book_sorce == '暂未评') {
        this.value = 0
      } else {
        this.value = Math.round(this.bookDatas.book_sorce)
      }
    })

    // 评论表
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/comment',
      data: {
        id: this.$route.params.id
      }
    }).then((res) => {
      if (res.data.code == 0) {
        Toast(res.data.msg)
      }
      this.commentDates = res.data
      // console.log(res)
    })
    // 详情页推荐
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/detail_recommend'
    }).then((res) => {
      this.bookDates = res.data
      // console.log(this.bookDates)
    })
  },
  created() {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index {
  background-color: rgb(226, 226, 226);
}
.book1 {
  display: flex;
  margin: 10px 20px;
}
.book3 {
  display: flex;
  flex-direction: column;
  /* align-content: space-around; */
  margin-left: 10px;
}
.book_text {
  margin: 5px 0px;
}
.butt {
  display: flex;
  justify-content: space-around;
}
.buttomfb {
  position: fixed;
  bottom: 0%;
  display: flex;
  width: 100%;
  height: 30px;
  background-color: rgb(255, 82, 39);
  justify-content: space-around;
  align-items: center;
}
.plun {
  width: 80%;
  margin-left: 10%;
}

.plun1 {
  display: flex;
  justify-content: space-between;
}
.wihtee {
  background-color: white;
}
.wihtet {
  background-color: white;
}
.remen {
  background-color: #fff;
}
</style>
